import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile'
import { withRouter, Redirect } from 'react-router-dom'
import routerConfig from '@MODULES/routerConfig'
import api from '@UTILS/api'
import store from 'store'
import helper from '@UTILS/helper'
import config from '@UTILS/config'

class Header extends Component {

    constructor(props) {
        super(props)
        this.state = {
            title: '',
            backUrl: this.props.backUrl || false,
            rightContent: this.props.rightContent || false,
            leftContent: this.props.leftContent || false,
            titleColor: this.props.titleColor || false,
            iconColor: this.props.iconColor || config.theme['color-text-theme'],
            bgColor: this.props.bgColor || false,
        }
    }

    componentDidMount() {
        this.setState({
            title: this.getTitle()
        })
    }

    componentWillReceiveProps() {
        this.setState({
            title: this.getTitle()
        })
    }

    getTitle() {
        const path = this.props.match.path
        // if (this.props.title) {
        //     return this.props.title
        // }
        for (let i = 0; i < routerConfig.length; i++) {
            const element = routerConfig[i]
            if (element.path === path) {
                return element.title;
            }
        }
    }

    goBack() {
        if (this.state.leftContent) {
            return
        }
        if (this.state.backUrl) {
            console.log(this.state.backUrl)
            this.props.history.push(this.state.backUrl)
        } else {
            this.props.history.goBack()
        }
    }

    render() {
        let titleContent = this.props.title || this.getTitle()
        return (
            <NavBar
                mode="light"
                icon={this.state.leftContent ? this.state.leftContent : <Icon color='#333333' type="left" />}
                onLeftClick={() => this.goBack()}
                rightContent={this.state.rightContent}
                style={{
                    backgroundColor: this.state.bgColor,
                    color: this.state.iconColor,
                    borderBottom:'1px solid #e6e6e6'
                }}
            >
                <div style={{ color: this.state.titleColor }}>{titleContent}</div>
            </NavBar>
        )
    }
}

export default withRouter(Header)
